<script setup lang="ts">
/**
 * @name TeamSetting
 * @description 班组设置
 */
import { Delete, Edit } from '@element-plus/icons-vue'
import type { Action } from 'element-plus'
import SearchForm from './components/SearchForm.vue'
import { useTeamLists } from '@/mixins/TeamManagement/MixinTeamLists'

import type { Team } from '@/types'

import { schedulingApi } from '@/api'

const searchFormRef
  = ref<InstanceType<typeof SearchForm>>()

const {
  loading,
  lists,
  setLists,
  columns,
  pagination,
  getLists,
} = useTeamLists()
const [team, setTeam] = useShallowState<
  Pick<Team, 'id' | 'name'>
>({
  id: 0,
  name: '',
})
const [modalTitle, setModalTitle] = useState('')

function queryLists() {
  const { keyword } = searchFormRef.value?.query || {}
  getLists({
    name: keyword?.trim() || '',
  })
}

function clickSearch() {
  pagination.pageNumber = 1
  queryLists()
}

function clickAdd() {
  setTeam({ id: 0, name: '' })
  setModalTitle('新增班组')
  openModal()
}

function clickEdit(row: Team) {
  setTeam(row)
  setModalTitle('编辑班组')
  openModal()
}
async function clickDelete(row: Team) {
  if (row.id) {
    const res: Action = await ElMessageBox.confirm(
      '确定要删除这一行？',
      '操作提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).catch(e => e)
    if (res === 'confirm') {
      try {
        await schedulingApi.deleteTeamById(row.id)
        ElMessage.success('删除成功')
        await nextTick()
        queryLists()
      }
      catch (e) {}
    }
  }
}

function openModal() {
  // @ts-expect-error prompt params
  ElMessageBox.prompt('班组名称', modalTitle.value, {
    inputPlaceholder: '请输入班组名称，字数不超过10个',
    inputErrorMessage: '请输入班组名称，字数不超过10个',
    inputPattern: /^.{1,10}$/,
    inputValue: team.value.name || null,
  })
    .then(({ value }) => {
      const params = {
        id: team.value.id,
        name: value,
      }
      if (params.id === 0) {
        // @ts-expect-error 保存時不用傳刪除id
        delete params.id
      }
      schedulingApi.saveOrUpdateTeam(params).then(() => {
        queryLists()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div
    class="padding-sm h-full w-full flex flex-col container"
  >
    <TableLists
      :loading="loading"
      :lists="lists"
      :columns="columns"
      show-toolbox
    >
      <template #actions>
        <SearchForm
          ref="searchFormRef"
          @search="clickSearch"
          @add="clickAdd"
        />
      </template>
      <template #operate="{ row }">
        <TdButton
          title="编辑"
          :icon="Edit"
          type="primary"
          @click="clickEdit(row)"
        />
        <TdButton
          title="删除"
          :icon="Delete"
          type="danger"
          @click="clickDelete(row)"
        />
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="queryLists"
      @size-change="queryLists"
    />
  </div>
</template>
